/*
*swiper  自动分组 / Carousel 模式(06)
 */
import React from 'react'
import { Carousel } from 'antd-mobile';
import './Swiper_2.css'
import  {group_arr} from  '../../util/util'


class Swiper_2 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            banner: require('./banner.png'),
            swipeSpeed: this.props.swipeSpeed ? this.props.swipeSpeed : 10,
            speed: this.props.speed ? this.props.speed : 500,
            swiperdata:[],
            product_href:'productinfo.php?product_id='
        };
    }
    componentDidMount() {



    }
    componentWillReceiveProps(nextProps){
        if(nextProps.swiper_2_data.length>1){
            var swiperdata=group_arr(nextProps.swiper_2_data,2)
            this.setState({
                swiperdata: swiperdata,
            });

        }
    }
    go_to_product_info(product_id){
        window.location.href=this.state.product_href+product_id
    }
    render() {
        return (
            <Carousel
                className="my-carousel"
                autoplay={true}
                infinite
                selectedIndex={1}
                dots={false}
                swipeSpeed={this.state.swipeSpeed}
                speed={this.state.speed}
            >
                {this.state.swiperdata.map((item,index) => (
                    <div key={index} className="Swiper_2_content">
                        {item.map(v => (
                            <div key={v.web_url} className="Swiper_2_smallItem"
                                 onClick={ ()=>{window.location.href=v.web_url } }
                            >
                                <img
                                    src={v.image_url}
                                    alt=""
                                    onLoad={() => {
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({
                                            initialHeight: null,
                                        });
                                    }}
                                />
                            </div>
                        ))}
                    </div>
                ))}
            </Carousel>
        );
    }
}


export default Swiper_2

